// 间距
@for $i from 0 through 60 {
  .ma-#{$i} {
    margin: $i + px;
  }

  .pa-#{$i} {
    padding: $i + px;
  }

  .mx-#{$i} {
    margin-left: $i + px;
    margin-right: $i + px;
  }

  .px-#{$i} {
    padding-left: $i + px;
    padding-right: $i + px;
  }
  .my-#{$i} {
    margin-top: $i + px;
    margin-bottom: $i + px;
  }

  .py-#{$i} {
    padding-top: $i + px;
    padding-bottom: $i + px;
  }

  @each $short, $long in l left, t top, r right, b bottom {
    .m#{$short}-#{$i} {
      margin-#{$long}: $i + px;
    }

    .p#{$short}-#{$i} {
      padding-#{$long}: $i + px;
    }
  }
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
.mt-auto {
  margin-top: auto;
}
.mb-auto {
  margin-bottom: auto;
}
